import React,{useEffect, useState, setState} from "react"
import "./columnLeft.less"
// import "../column-left/columnLeft.less"
import * as echarts from 'echarts';
// import $ from 'jquery';
function ColumnLeft() {
  const [state, setState] = useState({
    count: 0,
    genuine: 0,
    pirated: 0,
    other:0,
    wingenui:0,
    officegenui:0,
    winpirated: 0,
    officepirated: 0,
    os:0,
    app:0
  })
  const getTotalRatio = async() => {
    const url = "/api/asset/total";
    const response = await fetch(url);
    const data = await response.json();
    const url2 = "/api/asset/genuinenum";
    const response2 = await fetch(url2);
    const data2 = await response2.json();
    const url3 = "/api/asset/piratednum";
    const response3 = await fetch(url3);
    const data3 = await response3.json();
    var other = data.data - data2.data - data3.data;
    if(other > data.data || other < 0){
      other = 0;
    }
  
    const url4 = "/api/asset/wingenui";
    const response4 = await fetch(url4);
    const data4 = await response4.json();
    const url5 = "/api/asset/officegenui";
    const response5 = await fetch(url5);
    const data5 = await response5.json();
    const url6 = "/api/asset/winpirated";
    const response6 = await fetch(url6);
    const data6 = await response6.json();
    const url7 = "/api/asset/officepirated";
    const response7 = await fetch(url7);
    const data7 = await response7.json();
    const url8 = "/api/asset/osnum";
    const response8 = await fetch(url8);
    const data8 = await response8.json();
    const url9 = "/api/asset/appnum";
    const response9 = await fetch(url9);
    const data9 = await response9.json();
    //FIXME: 为了在雷达图中显著标识正版软件，将正版数据*10倍放大。
    var ratio = 10;
    setState({
      count: data.data,
      genuine: data2.data*ratio,
      pirated: data3.data,
      other: other,
      wingenui: data4.data,
      officegenui: data5.data,
      winpirated: data6.data,
      officepirated: data7.data,
      os: data8.data,
      app: data9.data
    }); 
    console.log("fetch radar total num/genuine/pirated/os/app ", data.data, data2.data, data3.data, data8.data, data9.data);   
    return data.data;
  }    
useEffect(()=>{
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;
  var xAxisData = [];
  var data1 = [];
  var data2 = [];
  getTotalRatio();
  for (var i = 0; i < 1; i++) {
    xAxisData.push('总数');
    console.log("ratio os: total", state.os, state.app, state.os*10/(state.os + state.app))
    data1.push(state.os);
    data2.push(state.app);
  }
  option = {
    // title: {
    //   text: 'Bar Animation Delay'
    // },
    legend: {
      data: ['操作系统', '应用程序'],
      textStyle:{
        color:"#fff"
      },
    },
    toolbox: {
      // y: 'bottom',
      feature: {
        magicType: {
          type: ['stack']
        },
        dataView: {},
        saveAsImage: {
          pixelRatio: 2
        }
      }
    },
    tooltip: {},
    xAxis: {
      data: xAxisData,
      splitLine: {
        show: false
      }
    },
    yAxis: {},
    series: [
      {
        name: '操作系统',
        type: 'bar',
        data: data1,
        emphasis: {
          focus: 'series'
        },
        animationDelay: function (idx) {
          return idx * 10;
        }
      },
      {
        name: '应用程序',
        type: 'bar',
        data: data2,
        emphasis: {
          focus: 'series'
        },
        animationDelay: function (idx) {
          return idx * 10 + 100;
        }
      }
    ],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 5;
    }
  };
  
  option && myChart.setOption(option);
    // 监听浏览器缩放，图表对象调用缩放resize函数
    window.addEventListener("resize", function() {
      myChart.resize();
    });
},[state.count])

useEffect(()=>{
  var chartDom = document.getElementById('main1');
var myChart = echarts.init(chartDom);
var option;
getTotalRatio();
option = {
  // title: {
  //   text: 'Proportion of Browsers',
  //   subtext: 'Fake Data',
  //   top: 10,
  //   left: 10
  // },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    type: 'scroll',
    bottom: 0,
    textStyle:{
      color:"#fff"
    },
    data: (function () {
      var list = [];
      for (var i = 1; i <= 5; i++) {
        list.push(i + 2022 + '');
      }
      return list;
    })()
  },
  visualMap: {
    top: 'middle',
    right: 10,
    color: ['red', 'yellow'],
    calculable: true
  },
  radar: {
    indicator: [
      { text: '正版', max: 400 },
      { text: '非正版', max: 400 },
      { text: '免费或其他软件', max: 400 }
    ]
  },
  series: (function () {
    var series = [];
    for (var i = 1; i <= 5; i++) {
      series.push({
        type: 'radar',
        symbol: 'none',
        lineStyle: {
          width: 1
        },
        emphasis: {
          areaStyle: {
            color: 'rgba(0,250,0,0.3)'
          }
        },
        data: [
          {
            value: [
              state.genuine,
              state.pirated,
              state.other
            ],
            name: i + 2022 + ''
          }
        ]
      });
    }
    return series;
  })()
};

option && myChart.setOption(option);
  // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener("resize", function() {
    myChart.resize();
  });
},[state.count])
useEffect(()=>{
var chartDom = document.getElementById('main2');
var myChart = echarts.init(chartDom);
var option;

option = {
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  // title: {
  //   text: 'Gradient Stacked Area Chart'
  // },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['非正版软件'],
    textStyle:{
      color:"#fff"
    },
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Windows', 'Office'],
      axisLabel:{
        color:"#FFF"
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '非正版软件',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [state.winpirated, state.officepirated]
    }    
  ]
};

option && myChart.setOption(option);
  // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener("resize", function() {
    myChart.resize();
  });
},[])
    return (
            <div className="column">
                <div className="panel bar">
                    <h2>软件类别统计</h2>
                    <div className="chart" id="main"></div>
                    <div className="panel-footer"></div>
                </div>
                <div className="panel line">
                    <h2>正版软件占比统计</h2>
                    <div className="chart" id="main1"></div>
                    <div className="panel-footer"></div>
                </div>
                <div className="panel pie">
                    <h2>非正版软件统计</h2>
                    <div className="chart" id="main2"></div>
                    <div className="panel-footer"></div>
                </div>
            </div>
    )
}
export default ColumnLeft